<script>
import GmTable from "@/view/components/gmTable.vue";
import treeCom from "@/view/traffic/studentCom/treeCom.vue";
let baseUrl = 'http://36.137.92.253:9000'
export default {
  name: "statisticsStudentTrip",
  components: {treeCom, GmTable},
  data() {
    return {
      dataList: [],
      stageList:[],
      tablePage:{
        total: 0,
        current: 1,
        size: 20
      },
      tableForm: {
        districtcode: '',
        schoolcode: '',
        educationstage: '',
        stattype:'c',
        ifsubmit:'2'
      }
    }
  },
  mounted() {
    this.getAllList()
    this.$HttpService.get(`/common/getItem/education_stage`).then(res=>{
      this.stageList = res
    })
  },
  methods: {
    getAllList() {
      fetch(`${baseUrl}/api/statisticsstudenttrip?exporttype=no&ifsubmit=${this.tableForm.ifsubmit}&stattype=${this.tableForm.stattype}&page=${this.tablePage.current}&limit=${this.tablePage.size}&districtcode=${this.tableForm.districtcode}&educationstage=${this.tableForm.educationstage}&schoolcode=${this.tableForm.schoolcode}`).then((res) => {
        return res.json()
      }).then((data) => {
        this.dataList = data.TStatisticsStudentTrips;
        this.tablePage.total = data.total;
      })
    },
    clickSchoolTree(node){
      this.tableForm.districtcode = '';
      this.tableForm.schoolcode = '';
      if (node.type == "districtCode") this.$set(this.tableForm, 'districtcode', node.districtCode)
      if (node.type == 'schoolCode')  this.$set(this.tableForm, 'schoolcode', node.schoolCode)
      this.getAllList()
    },
    stattypeChange(){
      this.tableForm.districtcode = '';
      this.tableForm.schoolcode = '';
      this.$refs.treeDom.refresh();
    },
    resetQuery() {
      this.tableForm = {
        districtcode: '',
        schoolcode: '',
        educationstage: '',
        stattype:'',
        ifsubmit:'',
      }
      this.getAllList()
      this.$refs.treeDom.refresh();
    },
    exportFile(exporttype){
      window.open(`${baseUrl}/api/statisticsstudenttrip?exporttype=${exporttype}&ifsubmit=${this.tableForm.ifsubmit}&stattype=${this.tableForm.stattype}&page=${this.tablePage.current}&limit=${this.tablePage.size}&districtcode=${this.tableForm.districtcode}&educationstage=${this.tableForm.educationstage}&schoolcode=${this.tableForm.schoolcode}`)
    },
    pageChange(page){
      this.tablePage.current = page;
      this.getAllList()
    }
  }
}

</script>

<template>
  <div style="padding-bottom: 20px">
    <div class="search">
      <el-form ref="form" :inline="true" :model="tableForm" label-width="120px">
        <el-form-item label="教育等级">
          <el-select size="small" v-model="tableForm['educationstage']" placeholder="请选择教育阶段">
            <el-option v-for="item in stageList" :key="Math.random()" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="行政层级">
          <el-select size="small" v-model="tableForm['stattype']" placeholder="请选择行政层级" @change="stattypeChange">
            <el-option label="区县级" value="3"></el-option>
            <el-option label="乡镇级" value="4"></el-option>
            <el-option label="社区级" value="5"></el-option>
            <el-option label="学校级别" value="s"></el-option>
            <el-option label="班级级别" value="c"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="填报状态">
          <el-select size="small" v-model="tableForm['ifsubmit']" placeholder="请选择行政层级" @change="stattypeChange">
            <el-option label="已填报" value="1"></el-option>
            <el-option label="未填报" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="getAllList">搜索
          </el-button>
          <el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left"
                     @click="resetQuery()">重置
          </el-button>
          &nbsp;
          <el-dropdown size="small" @command="exportFile">
            <el-button class="filter-item" size="mini" type="info" icon="el-icon-refresh-left">导出</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="current">导出当前页</el-dropdown-item>
              <el-dropdown-item command="all">全量导出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
      </el-form>
    </div>
    <div class="table">
      <div class="t1">
        <tree-com ref="treeDom" @clickNode="clickSchoolTree"></tree-com>
      </div>
      <div class="t2">
        <el-table :data="dataList" stripe style="width: 100%" type="flex" justify="center" align="middle">
          <el-table-column align="center" v-if="dataList[0]?.District_name_level3 !== ''" prop="District_name_level3" label="区县名称"></el-table-column>
          <el-table-column align="center" v-if="dataList[0]?.District_name_level4 !== ''" prop="District_name_level4" label="乡镇街道名称"></el-table-column>
          <el-table-column align="center" v-if="dataList[0]?.District_name_level5 !== ''" prop="District_name_level5" label="村社区名称"></el-table-column>
          <el-table-column align="center" v-if="dataList[0]?.School_name !== ''" prop="School_name" label="学校名称"></el-table-column>
          <el-table-column align="center" v-if="dataList[0]?.Education_stage_name !== ''" prop="Education_stage_name" label="教育等级名称"></el-table-column>
          <el-table-column align="center" v-if="dataList[0]?.Grade_name !== ''" prop="Grade_name" label="年级"></el-table-column>
          <el-table-column align="center" v-if="dataList[0]?.Class_name !== ''" prop="Class_name" label="班级名称"></el-table-column>
          <el-table-column align="center" v-if="dataList[0]?.Student_district_name !== ''" prop="Student_district_name" label="学生常住区划"></el-table-column>
          <el-table-column align="center" v-if="dataList[0]?.Want_number !== ''" prop="Want_number" label="需乘车数量"></el-table-column>
          <el-table-column align="center" v-if="dataList[0]?.No_want_number !== ''" prop="No_want_number" label="不需乘车数量"></el-table-column>
        </el-table>
      </div>
    </div>
    <div class="page">
      <el-pagination
          :page-size="tablePage.size"
          :pager-count="tablePage.current"
          layout="prev, pager, next"
          background
          @current-change="pageChange"
          :total="tablePage.total">
      </el-pagination>
    </div>
  </div>
</template>

<style scoped>
.search {
  height: 100px;
  width: 98%;
  padding: 20px;
  border-radius: 20px;
  background-color: white;
  margin: 0 auto;
  box-shadow: 3px 3px 3px 2px #e8e8e8;
  position: relative;
  background-image: url('../../assets/images/searbg.jpg');
  background-repeat: no-repeat;
  background-position: right -20px;
  background-size: 14%;
}

.table {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .t1{
    width: 250px;
    padding: 20px;
    min-height: 40vh;
    background-color: #ffffff;
    border-radius: 20px;
    box-shadow: 3px 3px 3px 2px #e8e8e8;
  }
  .t2{
   width: calc(100% - 300px);
  }
}
.page{
  padding: 20px 0;
  text-align: center;
}
</style>